<template>
  <!-- 复用s-select-sku-rental的模板结构 -->
  <su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose>
    <view class="ss-modal-box">
      <!-- 商品信息头部 -->
      <view class="modal-header ss-flex ss-col-center">
        <image class="goods-img" :src="sheep.$url.cdn(goodsInfo.picUrl)" mode="aspectFit" />
        <view class="header-content ss-flex-col ss-row-between ss-flex-1">
          <view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
          <view class="price-text">¥{{ fen2yuan(goodsInfo.price) }}</view>
          <view class="stock-text">库存{{ state.selectedSku.stock || 0 }}</view>
        </view>
      </view>

      <!-- 规格选择内容 -->
      <view class="modal-content">
        <scroll-view scroll-y class="modal-content-scroll">
          <!-- SKU规格选择 -->
          <view class="spec-section ss-m-b-40" v-for="property in goodsInfo.skus[0]?.properties" :key="property.propertyId">
            <view class="label-text ss-m-b-20">{{ property.propertyName }}</view>
            <view class="spec-list ss-flex ss-flex-wrap">
              <view
                v-for="value in getPropertyValues(property.propertyId)"
                :key="value.valueId"
                class="spec-btn ss-flex ss-col-center ss-row-center"
                :class="{
                  'ui-BG-Main-Gradient': isPropertyValueSelected(property.propertyId, value.valueId),
                  'disabled-btn': !isPropertyValueAvailable(property.propertyId, value.valueId)
                }"
                @tap="selectPropertyValue(property.propertyId, value.valueId)"
              >
                {{ value.valueName }}
              </view>
            </view>
          </view>

          <!-- 购买数量 -->
          <view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
            <view class="label-text">购买数量</view>
            <su-number-box
              :min="1"
              :max="state.selectedSku.stock"
              :step="1"
              v-model="state.selectedSku.goods_num"
              @change="onNumberChange($event)"
            />
          </view>
        </scroll-view>
      </view>

      <!-- 操作区 -->
      <view class="modal-footer border-top">
        <view class="buy-box ss-flex ss-row-between">
          <button class="ss-reset-button add-cart-btn" @tap="onAddCart">加入购物车</button>
          <button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
        </view>
      </view>
    </view>
  </su-popup>
</template>

<script setup>
  // 复用s-select-sku-rental的逻辑，修改相关文案
  // 主要区别：
  // 1. 显示"购买数量"而不是"租赁数量"
  // 2. 显示"立即购买"而不是"立即租赁"
  // 3. 保留"加入购物车"按钮
</script>

<style lang="scss" scoped>
  // 复用s-select-sku-rental的样式
  // 主要调整：
  // 1. 恢复双按钮布局（加入购物车 + 立即购买）
  // 2. 按钮宽度调整为各占一半
</style>